<template>
  <div>
    <van-nav-bar title="标题" left-text="返回" class="top">
      <template #title>
        <span>发布房源</span>
      </template>
      <template #left>
        <span @click="$router.back()">返回</span>
      </template>
    </van-nav-bar>

    <div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="name"
          name="city"
          label="小区名称"
          placeholder="请输入小区名称"
        />
        <van-field
          v-model="price"
          name="price"
          label="租金"
          placeholder="请输入租金"
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          v-model="size"
          name="size"
          label="建筑面积"
          placeholder="请输入建筑面积"
          :rules="[{ required: true, message: '' }]"
        />

        <van-field
          readonly
          clickable
          name="roomType"
          :value="roomType"
          label="户型"
          placeholder="选择户型"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          name="floor"
          :value="floor"
          label="所在楼层"
          placeholder="选择楼层"
          @click="showPicker1 = true"
        />
        <van-popup v-model="showPicker1" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns1"
            @confirm="onConfirm1"
            @cancel="showPicker1 = false"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          name="oriented"
          :value="oriented"
          label="朝向"
          placeholder="选择朝向"
          @click="showPicker2 = true"
        />
        <van-popup v-model="showPicker2" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns2"
            @confirm="onConfirm2"
            @cancel="showPicker2 = false"
          />
        </van-popup>
        <p>房屋标题</p>
        <van-field
          v-model="title"
          name="title"
          label=""
          placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
          :rules="[{ required: true, message: '' }]"
        />

        <p>上传图片</p>
        <van-uploader :after-read="afterRead" v-model="fileList" multiple />
        <p>房屋描述</p>
        <van-field
          v-model="description"
          rows="2"
          name="description"
          autosize
          label=""
          type="textarea"
          maxlength="50"
          placeholder="请输入描述"
          show-word-limit
        />
        <div class="bt" style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            style="background-color: #21b97a"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "HouseAdd",

  data() {
    return {
      name: "",
      price: "",
      size: "",
      roomType: "",
      floor: "",
      oriented: "",
      title: "",
      // fileList: [],
      description: "",
      columns: [
        { text: "一室", value: "一室" },
        { text: "二室", value: "二室" },
        { text: "三室", value: "三室" },
        { text: "四室", value: "四室" },
        { text: "四室+", value: "四室+" },
      ],
      columns1: [{ text: "高楼层" }, { text: "中楼层" }, { text: "低楼层" }],
      columns2: [
        { text: "东" },
        { text: "西" },
        { text: "南" },
        { text: "北" },
        { text: "东南" },
        { text: "东北" },
        { text: "西南" },
        { text: "西北" },
      ],
      showPicker: false,
      showPicker1: false,
      showPicker2: false,
    };
  },

  mounted() {},

  methods: {
    clean() {
      this.name = "";
      this.price = "";
      this.size = "";
      this.roomType = "";
      this.floor = "";
      this.oriented = "";
      this.title = "";
      this.description = "";
    },
    onConfirm(value) {
      this.showPicker = false;
      this.roomType = value.text;
    },
    onConfirm1(value) {
      this.showPicker1 = false;
      this.floor = value.text;
    },
    onConfirm2(value) {
      this.showPicker2 = false;
      this.oriented = value.text;
    },

    async afterRead() {},
    onSubmit(value) {
      
    },
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #21b97a;
}
.van-cell {
  height: 60px !important;
}
p {
  margin: 0 15px;
  font-size: 14px;
  padding-bottom: 5px;
  border-bottom: 1px #ccc solid;
}
</style>
